<template>
	<div>
		<div class="header">
			<div class="icon-left" @click="$router.goBack()"><img src="../../static/img/icon/release_icon/return@2x.png"/></div>
			修改收货地址
			<div class="gray" @click="submit">保存</div>
		</div>
		<div class="header-null"></div>
		<div class="mui-input-group">
			<div class="mui-input-row">
				<label>收货人</label>
				<input type="text" name="" id="" value=""  class="mui-input-clear" v-model="info.consignee"/>
			</div>
			<div class="mui-input-row">
				<label>联系电话</label>
				<input type="number" name="" id="" value=""  class="mui-input-clear" v-model="info.contactWay"/>
			</div>
			<div class="mui-input-row" ref="cityPicker" @click="picker">
				<div class="mui-table-view-cell">					
					<a class="mui-navigate-right">{{city}}</a>
				</div>
			</div>
			<div class="mui-input-row">
				<label>街道</label>
				<input type="text" name="" id="" value=""  class="mui-input-clear" v-model="info.contactAddress"/>
			</div>
		</div>
		<!--<div class="mui-input-row">
			<textarea rows="3" placeholder="">阿斯达所东东ad</textarea>
		</div>-->
		<div class="deleted-address" @click="deleted(info.UserAddressID)">
			删除地址
		</div>
		<div class="address">
			<div @click="check = !check">
				<img src="../../static/img/icon/release_icon/weixuanzhong@2x.png" v-if="!check"/>
				<img v-else src="../../static/img/icon/release_icon/nextstep@2x.png"/>
				设为默认收货地址
			</div>
		</div>
	</div>
</template>

<script>
	import {getData} from '../service/getData'
	export default {
		data() {
			return {
				city: '省、市、区',
				check: false,
				info: {}
			}
		},
		methods: {
			picker() {  //选择地区
				var cityPicker3 = new mui.PopPicker({
					layer: 3
				});
				cityPicker3.setData(cityData3);
				var _this = this
				cityPicker3.show(function(items) {
					_this.city =  items[0].text + " " + items[1].text + " " + items[2].text;
					//返回 false 可以阻止选择框的关闭
					//return false;
				});
			},
			init() {  //默认加载
				this.$store.state.isLoading = true
				getData('/useraddress/getUserAddressByIdApi', {
					UserAddressID: this.$route.query.id
				}).then(d => {
					this.$store.state.isLoading = false
					this.city = d.userAddress.province+ " " + d.userAddress.city + " " + d.userAddress.district
					this.info = d.userAddress
					this.check = d.userAddress.isDefaultAddress == 0? false : true
				})
			},
			submit() {  //编辑
				this.$store.state.isLoading = true
				var city = this.city.split(' ')
				getData('/useraddress/updUserAddressApi', {
					UserAddressID: this.$route.query.id,
					userId: sessionStorage.userId,
					consignee: this.info.consignee,
					contactWay: this.info.contactWay,
					province: city[0],
					city: city[1],
					district: city[2],
					contactAddress: this.info.contactAddress,
					isDefaultAddress: this.check ? 1 : 0
				}).then(d => {
					this.$store.state.isLoading = false
					if(d.code == 1) {
						this.$router.goBack()
					} else {
						alert(d.msg)
					}
				})
			},
			deleted(id) {  //删除
				this.$store.state.isLoading = true
				getData('/useraddress/delUserAddressApi', {
					UserAddressID: id
				}).then(d => {
					this.$store.state.isLoading = false
					if(d.code == 1) {						
						this.$router.goBack()
					} else {
						alert(d.msg)
					}
				})
			}
		},
		mounted() {
			this.init()
			mui('.mui-input-row input').input();  //初始化input
		}
	}
</script>

<style scoped lang="less">
	.gray {
		color: #7b7b7b;
		font-weight: initial;
		font-size: 12px;
	}
	
	textarea {
		margin-bottom: 5px;
	}
		
	.deleted-address {
		margin-bottom: 5px;
		padding: 10px;
		font-size: 14px;
		color: red;
		background: #fff;
	}
	
	.address {
		display: flex;
		justify-content: center;
		background: #fff;
		padding: 10px 0;
		font-size: 14px;
		color: #7B7B7B;
		
		div {
			display: flex;
			align-items: center;
		}
		
		img {
			width: 15px;
			height: 15px;
			margin-right: 10px;
		}
	}
</style>